@use "@/styles/BoxShadow.module.scss";
@use "@/styles/IconSizes.module.scss";
@use "@/styles/Radius.module.scss";
@use "@/styles/Spacings.module.scss";

.button_wrapper {
  display: flex;
  padding: Spacings.$spacing03;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border-0);
  border-radius: Radius.$big;
  background-color: var(--background-0);
  cursor: pointer;
  color: var(--text-2);
  transition: box-shadow 0.3s ease;

  .left_wrapper {
    display: flex;
    align-items: center;
    gap: Spacings.$spacing03;

    .shortcuts_wrapper {
      display: flex;
      align-items: center;
      gap: Spacings.$spacing01;

      .shortcut {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        border: 1px solid var(--border-0);
        border-radius: Radius.$small;
        width: 16px;
        height: 16px;
      }
    }
  }

  &:hover {
    border-color: var(--primary-0);
    box-shadow: BoxShadow.$primary;
  }
}
